<template>
	<view class="rentaldetails">
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(item,index) in 4" :key="index">
				<view class="swiper-item">{{index}}</view>
			</swiper-item>
		</swiper>
		<view class="rentaldetails-item">
			<view class="title">
				<view class="price">
					￥4500/月
				</view>
				<view class="text">
					整租三室一厅一厨一卫
				</view>
			</view>
			<view class="content">
				<view class="content-items">
					<view class="items">
						<view class="names">
							朝向
						</view>
						<view class="">
							北
						</view>
					</view>
					<view class="items">
						<view class="names">
							面积
						</view>
						<view class="">
							101m²
						</view>
					</view>
					<view class="items">
						<view class="names">
							楼层
						</view>
						<view class="">
							13层
						</view>
					</view>
					<view class="items">
						<view class="names">
							入住时间
						</view>
						<view class="">
							10月2号
						</view>
					</view>
				</view>
				<view class="rentalroom">
					<view class="rentalroom-title">
						房屋介绍
					</view>
					<view class="rentalroom-item">
						<view class="items">
							<view class="item">
								<image src="../../../../static/icons/223.png" mode=""
									style="vertical-align: middle;width: 40rpx;height: 30rpx;margin-right: 20rpx;">
								</image>
								<text class="names">冰箱</text>
							</view>
							<view class="item">
								<image src="../../../../static/icons/223.png" mode=""
									style="vertical-align: middle;width: 40rpx;height: 30rpx;margin-right: 20rpx;">
								</image>
								<text class="names">洗衣机</text>
							</view>
							<view class="item">
								<image src="../../../../static/icons/223.png" mode=""
									style="vertical-align: middle;width: 40rpx;height: 30rpx;margin-right: 20rpx;">
								</image>
								<text class="names">热水器</text>
							</view>
						</view>
						<view class="items">
							<view class="item">
								<image src="../../../../static/icons/223.png" mode=""
									style="vertical-align: middle;width: 40rpx;height: 30rpx;margin-right: 20rpx;">
								</image>
								<text class="names">床</text>
							</view>
							<view class="item">
								<image src="../../../../static/icons/223.png" mode=""
									style="vertical-align: middle;width: 40rpx;height: 30rpx;margin-right: 20rpx;">
								</image>
								<text class="names">衣柜</text>
							</view>
							<view class="item">
								<image src="../../../../static/icons/223.png" mode=""
									style="vertical-align: middle;width: 40rpx;height: 30rpx;margin-right: 20rpx;">
								</image>
								<text class="names">智能门锁</text>
							</view>
						</view>
						<view class="items">
							<view class="item">
								<image src="../../../../static/icons/223.png" mode=""
									style="vertical-align: middle;width: 40rpx;height: 30rpx;margin-right: 20rpx;">
								</image>
								<text class="names">暖气</text>
							</view>
							<view class="item">
								<image src="../../../../static/icons/223.png" mode=""
									style="vertical-align: middle;width: 40rpx;height: 30rpx;margin-right: 20rpx;">
								</image>
								<text class="names">电视机</text>
							</view>
							<view class="item">
								<image src="../../../../static/icons/223.png" mode=""
									style="vertical-align: middle;width: 40rpx;height: 30rpx;margin-right: 20rpx;">
								</image>
								<text class="names">燃气灶</text>
							</view>
						</view>
						<view class="items">
							<view class="item">
								<image src="../../../../static/icons/223.png" mode=""
									style="vertical-align: middle;width: 40rpx;height: 30rpx;margin-right: 20rpx;">
								</image>
								<text class="names">宽带</text>
							</view>
							<view class="item">
								<image src="../../../../static/icons/223.png" mode=""
									style="vertical-align: middle;width: 40rpx;height: 30rpx;margin-right: 20rpx;">
								</image>
								<text class="names">沙发</text>
							</view>
							<view class="item">
								<image src="../../../../static/icons/223.png" mode=""
									style="vertical-align: middle;width: 40rpx;height: 30rpx;margin-right: 20rpx;">
								</image>
								<text class="names">油烟机</text>
							</view>
						</view>
						<view class="rental-text">
							<view class="text">
								房屋位于12栋，从小区北门进入左转即是。
							</view>
							<view class="text">
								自家房屋，全部精装修，拎包入住。
							</view>
							<view class="text">
								一年起租，长租可优惠。有意向可以联系我，随时看房。
							</view>
						</view>
					</view>
					<view class="footer">
						<view class="footer-title">
							房东联系方式
						</view>
						<view class="footer-content">
							手机号码：19269167898
						</view>
						<view class="footer-content">
							微信：19269167898
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="rentaldetails-bottom">
			<view :class="flag?'shoucang':'left'" @click="flag = !flag">
				收藏
			</view>
			<button class="Btn" @click="serverStore.flagshow = true">打电话</button>
		</view>
		<MaskAlertVue>
			选择手机号
		</MaskAlertVue>
	</view>
</template>

<script setup>
	import MaskAlertVue from '../../../../components/MaskAlert.vue';
	import {
		useServerStore
	} from '../../../../stores/serverStore';
	import {
		ref
	} from 'vue'
	const serverStore = useServerStore()
	const flag = ref(false)
</script>

<style lang="scss">
	.rentaldetails {
		padding-bottom: 250rpx;

		.rentaldetails-bottom {
			width: calc(100% - 40rpx);
			background-color: white;
			padding: 20rpx;
			border: 2rpx solid #f2f2f2;
			position: fixed;
			bottom: 0%;
			left: 0;
			display: flex;
			justify-content: space-between;

			.left {
				width: 20%;
				text-align: center;
				font-size: 26rpx;
				color: #aaa;
			}

			.shoucang {
				width: 20%;
				text-align: center;
				font-size: 26rpx;
				color: #ff9c4c;
			}

			.Btn {
				width: 80%;
				background-color: #006eff;
				color: white;
			}
		}

		.footer {
			.footer-title {
				margin-bottom: 30rpx;
			}

			.footer-content {
				font-size: 28rpx;
				margin-bottom: 10rpx;
			}
		}
	}

	.rentaldetails-item {
		padding: 30rpx;

		.content {
			.rental-text {
				font-size: 24rpx;
				margin-top: 60rpx;

				.text {
					margin-bottom: 20rpx;
				}
			}

			.rentalroom {

				.rentalroom-title {
					margin-bottom: 30rpx;

				}

				.rentalroom-item {
					border-bottom: 2rpx solid #f2f2f2;
					padding-bottom: 30rpx;
					margin-bottom: 30rpx;

					.items {
						display: flex;
						justify-content: space-around;
						font-size: 26rpx;
						margin-bottom: 30rpx;

						.item {
							width: 180rpx;
						}
					}
				}
			}

			.content-items {
				display: flex;
				justify-content: space-around;
				padding-bottom: 30rpx;
				border-bottom: 2rpx solid #f2f2f2;
				margin-bottom: 30rpx;

				.items {
					font-size: 28rpx;


					.names {
						color: #aaa;
					}
				}
			}

		}

		.title {
			line-height: 50rpx;
			border-bottom: 2rpx solid #f2f2f2;
			padding-bottom: 30rpx;
			margin-bottom: 30rpx;

			.price {
				font-size: 28rpx;
				color: #f46363;
			}

			.text {
				font-size: 28rpx;
			}
		}
	}
</style>